<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <div class="add clearfix">
          <el-button
            class="filter-itema fr"
            size="small"
            style="margin-left: 10px;"
            @click="handleAdd()"
            type="success"
            icon="el-icon-edit"
          >新增试题</el-button>
        </div>
        <el-form
          :model="requestParameters"
          ref="requestParameters"
          :label-position="labelPosition"
          label-width="80px"
        >
          <div class="filter-container">
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="学科">
                  <el-select
                    v-model="requestParameters.subjectName"
                    placeholder="请选择"
                    style="width:100%"
                    @change="changeSec"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select v-model="optionTwo" placeholder="请选择" style="width:100%" >
                    <el-option
                      v-for="item in twoLevelDirectory"
                      :key="item.value"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select v-model="tags" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in selectAll" :key="item.id" :value="item.tags"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input v-model="requestParameters.keyword"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select v-model="questionType" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in dataList" :key="item.id" :value="item.questionType"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select v-model="difficulty" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in dataList" :key="item.value" :value="item.difficulty"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select v-model="direction" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in dataList" :key="item.value" :value="item.direction"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select v-model="enterprise" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in dataList" :key="item.value" :value="item.enterprise"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input v-model="requestParameters.remarks"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称">
                  <el-input v-model="requestParameters.shortName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-row>
                    <el-col :span="11">
                      <el-select v-model="Acitys" placeholder="请选择" @change="changeCT">
                        <el-option
                          v-for="item in citySelect.province"
                          :key="item.value"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="11" :offset="2">
                      <el-select v-model="requestParameters.pname" placeholder="请选择">
                        <el-option
                          v-for="item in citySelect.cityDate"
                          :key="item.value"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button size="mini" @click="empty">清除</el-button>
                  <el-button size="mini" type="primary" @click="hSearch()" :loading="isLoading">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" label="试题编号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学科">
            <template slot-scope="scope">
              <span>{{scope.row.subject}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="目录">
            <template slot-scope="scope">
              <span>{{scope.row.catalog}}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型">
            <template slot-scope="scope">
              <span>{{scope.row.questionType==1?'单选':'多选'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题干">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="难度">
            <template slot-scope="scope">
              <span>{{scope.row.difficulty==1?'简单':'困难'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template slot-scope="scope">
              <span>{{scope.row.creator}}</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                plain
                @click="handleView(scope.row.id)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                circle
                plain
                @click="handleEdit(scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="handleDelete(scope.row.id)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                circle
                plain
                @click="handleRandom(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[5]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <Dialog ref="editUser" :titleInfo="titleInfo" :formBase="formData" v-on:newDataes="getList"></Dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
import { status } from '@/api/hmmm/constants'
import {
  simple as subjectList,
  list as selectAll
} from "@/api/hmmm/subjects.js";
import { simple as twoDirectory } from "@/api/hmmm/directorys.js"
import {
  list,
  detail,
  remove,
  choiceAdd
} from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import Dialog from './../components/questions-preview.vue'

export default {
  name: 'Questions',
  components: {
    Dialog
  },
  data () {
    return {
      isLoading: false,
      options: [],
      optionTwo:'',
      value: "",
      labelPosition: "right",
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      alertText: '',
      curPage: '',
      Acitys: null,
      twoLevelDirectory: '',
      tags: '',
      selectAll: [],
      questionType: '',
      difficulty: '',
      enterprise: '',
      direction: '',
      choiceState: 1,
      requestParameters: {
        page: 1,
        pagesize: 5,
        keyword: null,
        subjectName: null
      },
      titleInfo: {
        pageTitle: '题目预览', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: {
        data: {}
      },
      citySelect: {
        province: provinces(),
        cityDate: null
      }
    }
  },
  created() {
    this.getList();
    this.handleSelect();
    this.secondList()
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    async secondList(){
      const result = await twoDirectory()
      console.log(111112222,result);
      this.twoLevelDirectory = result.data
      // console.log(12314214124,this.twoLevelDirectory);
    },
    changeSec(){
        this.optionTwo = this.twoLevelDirectory[0].label
    },
    async getList() {
      const dataBase = {
        page: this.requestParameters.page,
        pagesize: this.requestParameters.pagesize,
        keyword: this.requestParameters.keyword,
        subjectID: this.requestParameters.subjectName
      }
      const result = await list(dataBase)
      this.dataList = result.data.items
      this.total = result.data.counts
    },
    async handleView (id) {
      this.$refs.editUser.dialogFormV()

      const result = await detail({ id: id })
      console.log(result)
      this.formData = result
      const item = this.formData.data.options.find(item => item.isRight)
      this.formData.initAnsId = item.id
      const items = this.formData.data.options.find(item => item.isRight)
      console.log('1112323', items)
      // console.log(111111,this.formData);
    },
    handleStatus () {},
    handleCurrentChange (curPage) {
      this.requestParameters.page = curPage
      this.getList()
    },
    handleEdit (id) {
      this.$router.push('/questions/new/?id=' + id)
    },
    handleDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const result = await remove({ id: id })
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleAdd () {
      this.$router.push('/questions/new')
    },
    async handleSelect () {
      const result = await subjectList()
      this.options = result.data
      const result1 = await selectAll()
      this.selectAll = result1.data.items
    },
    hSearch () {
      this.isLoading = true
      this.getList()
      setTimeout(() => {
        this.isLoading = false
      }, 1000)
    },
    empty() {
      this.requestParameters.keyword = null;
      this.requestParameters.subjectName = null;
      this.optionTwo=null
      this.tags = null
      this.questionType=null
      this.difficulty=null
      this.direction=null
      this.enterprise=null
      this.requestParameters.remarks=null
      this.requestParameters.shortName=null
      this.requestParameters.pname=null
      this.Acitys=null
      this.getList();

    },
    changeCT () {
      this.citySelect.cityDate = citys(this.Acitys)
    },
    handleRandom (id) {
      this.$confirm('此操作将添加到精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const result = await choiceAdd({
            id: id,
            choiceState: 1
          })
          this.getList()
          this.$message({
            type: 'success',
            message: '添加到精选题库成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '添加失败'
          })
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.filter-container {
  padding: 0;
}
.add .el-button {
  margin-bottom: 10px;
  float: right;
}
.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.el-pagination {
  float: right;
  margin-top: 10px;
}
</style>
